<template>
	<view v-show="!isLoading">
		<view class="introduce-mask" v-show="showMask">
			<view class="introduce-mask-title">
				位置权限使用说明
			</view>
			<view class="introduce-mask-content">
				用于向你展示当前你所在的城市名字
			</view>
		</view>

		<view class="header-nav" @tap="getCurrentCity">
			<image src="@/static/images/weizhi.png" mode="" class="area_city_img"></image>
			<view style="color: #fff;">{{city}}</view>
		</view>
		<!-- 头部轮播 -->
		<view class="carousel-section1" v-if="cate == 1">
			<!-- 标题栏和状态栏占位符 -->
			<view class="navbar" :style="{top:barHeight}">
				<view class="gologin">
					<text v-show="!hasLogin" @tap="gologin">登录</text>
					<text v-show="hasLogin" @tap="toLogout">退出</text>
				</view>
				<view class="search">
					<input class="searchinput" type="text" placeholder="请输入工种关键字" v-model="keyword">
					<image class="search-img" src="@/static/images/sousuo.png" alt="" @tap="search"></image>
				</view>

				<view class="area_city" @tap="toggle(2)">工人版</view>

			</view>
		</view>

		<view class="carousel-section2" v-if="cate == 2">
			<!-- 标题栏和状态栏占位符 -->
			<view class="navbar" :style="{top:barHeight}">
				<view class="gologin">
					<text v-show="!hasLogin" @tap="gologin">登录</text>
					<text v-show="hasLogin" @tap="toLogout">退出</text>
				</view>
				<view class="search">
					<input class="searchinput" type="text" placeholder="请输入工种关键字" v-model="keyword">
					<image class="search-img" src="@/static/images/sousuo.png" alt="" @tap="search"></image>
				</view>

				<view class="area_city" @tap="toggle(1)">企业版</view>

			</view>
		</view>
		<!-- 快捷方式 -->
		<view class="cate-section">


			<!-- <view class="cate-item" @tap="goWealth">
				<image class="cate-item-img" src="@/static/images/wdegongzi.png"></image>
				<text class="cate-item-text">我的财富</text>
			</view> -->

			<view class="cate-item" @tap="goProjectCommon()">
				<image class="cate-item-img" src="@/static/images/zhaogongcheng.png"></image>
				<text class="cate-item-text">项目发布</text>
			</view>
			<view class="cate-item" @tap="videoTeach">
				<image class="cate-item-img" src="@/static/images/jiaoxueshipin.png"></image>
				<text class="cate-item-text">视频教学</text>
			</view>
			<view class="cate-item" @tap="goHouses">
				<image class="cate-item-img" src="@/static/images/xinkuaijie.png"></image>
				<text class="cate-item-text">劳务快捷</text>
			</view>
			<view class="cate-item" v-if="cate == 1" @tap="timeCard">
				<image class="cate-item-img" src="@/pages6/static/images/completed.png"></image>
				<text class="cate-item-text">考勤表</text>
			</view>
			<view class="cate-item" @tap="findProject(3,'最新岗位')" v-if="cate == 1">
				<image class="cate-item-img" src="@/static/images/zuixingangwei.png"></image>
				<text class="cate-item-text">最新岗位</text>
				<view class="today-num" v-show="newNum > 0">{{newNum}}</view>
			</view>
			<!-- <view class="cate-item" @tap="findProject(2,'附近工作')" v-if="cate == 1">
				<image class="cate-item-img" src="@/static/images/fujingongzuo.png"></image>
				<text class="cate-item-text">附近工作</text>
			</view> -->

			<view class="cate-item" @tap="authApply" v-if="cate == 1">
				<image class="cate-item-img" src="@/static/images/shimingrenzheng.png"></image>
				<text class="cate-item-text">实名认证</text>
			</view>


			<!-- <view class="cate-item" @tap="findWorder(2,'附近劳务')" v-else>
				<image class="cate-item-img" src="@/static/images/fujingongzuo.png"></image>
				<text class="cate-item-text">附近劳务</text>
			</view> -->

			<!-- <view class="cate-item" @tap="findWorder(3,'最新劳务')" v-else>
				<image class="cate-item-img" src="@/static/images/zuixingangwei.png"></image>
				<text class="cate-item-text">最新劳务</text>
				<view class="today-num" v-show="newNum > 0">{{newNum}}</view>
			</view> -->



			<!-- <view class="cate-item" @tap="buyInsurance" v-if="cate == 1">
				<image class="cate-item-img" src="@/static/images/yiwai.png"></image>
				<text class="cate-item-text">保险</text>
			</view> -->
			<view class="cate-item" @tap="findWorder(3,'在线工人')" v-if="cate == 2">
				<image class="cate-item-img" src="@/static/images/zuixingangwei.png"></image>
				<text class="cate-item-text">在线工人</text>
			</view>
			<!-- <view class="cate-item" @tap="authApply" v-if="cate == 2">
				<image class="cate-item-img" src="@/static/images/shimingrenzheng.png"></image>
				<text class="list-item-text-title">实名认证</text>
				<text class="list-item-text-introduct">信息优先推荐</text>
			</view> -->
			<view class="cate-item" @tap="goCertificateCenter" v-if="cate == 2">
				<image src="@/static/images/jigongdaiban.png" class="cate-item-img" mode="widthFix"></image>
				<view class="cate-item-text">智慧培训</view>
			</view>
			<view class="cate-item" @tap="goBorrowMoney" v-if="cate == 2">
				<image class="cate-item-img" src="@/static/images/tixian.png"></image>
				<text class="cate-item-text">周转宝</text>
			</view>
		</view>

		<!-- 最新资讯 有报错 -->
		<TextRoll :newsList="newsList"
			:style="{color: iconColor , fontSize:iconSize, textSize:textSize,textColor:textColor}"></TextRoll>

		<!-- <view v-if="isSwitch" class="" style="position: fixed;width: 164upx;height: 77upx;right: 0;top:362upx;z-index: 200;">
				<view v-if="cate == 2" @tap="toggle(1)">
					<image src="@/static/images/business_switch.png" mode="" style="width: 164upx;height: 77upx;"></image>
				</view>
				<view v-else @tap="toggle(2)">
					<image src="@/static/images/work_switch.png" mode="" style="width: 164upx;height: 77upx;"></image>
				</view>
			</view> -->

		<!-- 热门工种 -->
		<view class="f-header">
			<!-- <image v-if="cate == 2" src="@/static/images/fabu.png"></image>
			<image v-else src="@/static/images/remengongzhong.png"></image> -->
			<view class="tit-box">
				<text class="tit" v-if="cate == 2" style="color:#545556">发布中心</text>
				<text class="tit" v-else>劳务中心</text>
			</view>
		</view>
		<view class="list-item" v-for="items in cateList" :key="items.id">
			<view class="guess-section">
				<view class="guess-item" v-for="item in items.child" :key="item.id" @tap="getThirdCates(item)">
					<!-- <view class="image-wrapper">
						<image :src="item.img1"></image>
					</view> -->
					<view class="image-wrapper" style="overflow: inherit !important;">
						<view class="" style="position: relative;">
							<image :src="item.img1"></image>
							<view v-if="item.subscript && cate==1"
								style="line-height:40rpx;text-align:center;width: 40rpx;height: 40rpx;padding:0 4rpx;position: absolute;right: -25rpx;top:-15rpx;background: #f3431a;color:#fff;font-size: 24rpx;border-radius: 20rpx;">
								{{item.subscript}}
							</view>
						</view>
					</view>
					<text class="title clamp">{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="downloading" v-show="showLoading">
			<view class="downloading-img">
				<image src="/static/images/banbengengxin.png" style="width:414rpx;height:415rpx;"></image>
			</view>
		</view>

		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" title="退出确认" content="" @confirm="dialogConfirm">
				<view class="" style="font-size: 30rpx;">
					确定要退出登录么
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialogT" type="dialog">
			<uni-popup-dialog :type="msgType" title="切换确认" content="" @confirm="dialogConfirmT">
				<view class="" style="font-size: 30rpx;">
					{{toggleContent}}
				</view>
			</uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="alertDialogIos" type="message" style="top:80upx">
			<uni-popup-message type="warning" message="温馨提醒：当前版本非最新版本，请去苹果商店下载最新版或者在微信搜索公众号“廉德劳务”关注并使用该公众号"
				:duration="80000"></uni-popup-message>
		</uni-popup>

		<!-- 底部菜单 -->
		<BottomTabbar :selected="0"></BottomTabbar>
	</view>
</template>

<script>
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	import TextRoll from '@/components/text-roll/text-roll.vue'
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {

		data() {
			return {
				msgType: 'info',
				keyword: '',
				newsList: [],
				cateList: [],
				iconColor: 'red',
				iconSize: '30upx',
				textSize: '30upx',
				textColor: '#f3431a',
				city: '定位中',
				toggleContent: '确定要切换企业版吗',
				isLoading: true,
				isSwitch: true,
				showMask: false,

				cate: 1,
				// isCate: false,
				isFabu: false,

				showLoading: false,
				isShowLogin: true,

				barHeight: 0,

				newNum: 0
			};
		},
		components: {
			TextRoll,
			BottomTabbar
		},
		computed: {
			...mapState(['hasLogin']),
		},

		onPageScroll: function(Object) {

			if (Object.scrollTop >= 85) {
				this.isSwitch = false;
			} else {
				this.isSwitch = true;
			}
		},

		async onLoad() {
			uni.showLoading({
				title: '加载中...'
			});
			this.userInfo = uni.getStorageSync("userInfo")
			let height = uni.getSystemInfoSync().statusBarHeight;
			this.barHeight = parseFloat(height) + parseInt(4) + 'px';

			let cate = uni.getStorageSync('cate');
			if ([1, 2].indexOf(cate) > -1) {
				this.cate = cate
			}

			this.loadData();
			uni.hideLoading();
			this.isLoading = false;

			// #ifdef APP-PLUS
			// plus.runtime.setBadgeNumber(8)
			//获取软件最新版本
			this.getNewVersion();
			//获取手机型号
			this.getMobileType();
			// #endif

			//更新最新
			uni.$on('changeNew', () => {
				if (this.hasLogin) {
					this.getNewNum();
				}
			})

		},
		methods: {
			...mapMutations(['login', 'logout']),

			async getMobileType() {
				uni.getPushClientId({
					success: (res) => {
						console.log(res)
						let push_clientid = res.cid

						if (!!push_clientid) {
							let dataObj = {
								client_id: push_clientid
							}
							this.addDeviceType(dataObj)
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			async authApply() {
				// console.log(this.hasLogin);
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				// console.log(this.userInfo)
				// console.log(status)
				// console.log(this.cate)
				if (this.cate == 1) {
					let status = this.userInfo.resume_status;
					switch (status) {
						case 0:
							this.$api.msg('请先完成基本信息')
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages2/pages/personal/personal'
								})
							}, 600)
							break;
						case 1:
							this.$api.msg('请先完成工作信息')
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages2/pages/work/work'
								})
							}, 600)
							break;
						case 2:
							uni.navigateTo({
								url: "/pages2/pages/authentication/authentication?ID1=" + encodeURI(this.IDcard
										.ID1) +
									"&ID2=" + encodeURI(this.IDcard.ID2)
							})
							break;
						case 3:
							this.$api.msg('正在审核中，请耐心等待')
							break;
						case 4:
							this.$api.msg('已通过认证，无需再次认证')
							break;
						case -1:
							uni.navigateTo({
								url: "/pages2/pages/authentication/authentication"
							})
							break;
					}
				} else if (this.cate == 2) {
					let status = this.userInfo.status;
					switch (status) {
						case -1:
							uni.navigateTo({
								url: "/pages4/pages/company-authentication/company-authentication"
							})
							break;
						case 0:
							this.$api.msg('请先完成基本信息')
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages4/pages/company/company'
								})
							}, 600)
							break;

						case 1:
							uni.navigateTo({
								url: "/pages4/pages/company-authentication/company-authentication?ID1=" +
									encodeURI(
										this.IDcard.ID1) +
									"&ID2=" + encodeURI(this.IDcard.ID2) + "&license=" + encodeURI(this
										.license)
							})
							break;
						case 2:
							this.$api.msg('正在审核中，请耐心等待')
							break;
						case 3:
							this.$api.msg('已通过认证，无需再次认证')
							break;

					}
				}

			},
			async addDeviceType(dataObj) {
				let url = '/addDevice'
				if (this.hasLogin) {
					let token = uni.getStorageSync('token');
					dataObj.cate = this.cate;
					dataObj.token = token;
					url = '/common/addDevice'
				}
				// console.log(dataObj)
				let res = await this.$myRequest({
					url: url,
					data: dataObj,
					methods: 'post'
				})

			},

			async loadData() {
				// this.getLocation();

				if ([1, 2].indexOf(uni.getStorageSync('cate')) > -1) {
					this.cate = uni.getStorageSync('cate')
					// if (this.cate == 2) {
					// 	this.isCate = true;
					// }
				}

				if (!this.hasLogin) {
					this.isShowLogin = true;
				} else {
					this.getNewNum();
				}

				let res = await this.$myRequest({
					url: '/',
					data: {
						token: uni.getStorageSync('token'),
					}
				})

				let data = res.data.data;
				this.newsList = data.news || [];
				this.cateList = data.position || [];
				// setTimeout(() => {
				// 	this.getLocation();
				// }, 1000)
			},

			async getCurrentCity() {
				// #ifdef APP-PLUS
				let systemType = uni.getSystemInfoSync().platform;
				if (systemType === 'android') {
					// 安卓
					this.showMask = true;
					var result = await permision.requestAndroidPermission(
						'android.permission.ACCESS_FINE_LOCATION')

					if (result == 1) {
						uni.setStorageSync('isLocation', false)
						this.showMask = false;
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: (res) => {
								this.city = res.address.city
							},
							fail: (res) => {
								this.$api.msg('获取地址失败，将导致部分功能不可用')
							},
						});
					} else {
						uni.setStorageSync('isLocation', true)
						this.showMask = false;
					}
				} else {
					uni.setStorageSync('isLocation', false)
					uni.getLocation({
						type: 'gcj02',
						geocode: true,
						success: (res) => {
							// console.log(res)
							this.getCity(res.latitude, res.longitude);
						},
						fail: (res) => {
							this.$api.msg('获取地址失败，将导致部分功能不可用')
						},
					});
				}

				// #endif
			},

			//获取当前位置
			async getLocation() {
				//高德地图
				// #ifdef APP-PLUS
				if (!uni.getStorageSync('isLocation')) {
					let systemType = uni.getSystemInfoSync().platform;
					// 安卓
					if (systemType === 'android') {
						this.showMask = true;
						var result = await permision.requestAndroidPermission(
							'android.permission.ACCESS_FINE_LOCATION')

						if (result == 1) {
							uni.setStorageSync('isLocation', false)
							this.showMask = false;
							uni.getLocation({
								type: 'gcj02',
								geocode: true,
								success: (res) => {
									this.city = res.address.city
								},
								fail: (res) => {
									this.$api.msg('获取地址失败，将导致部分功能不可用')
								},
							});
						} else {
							uni.setStorageSync('isLocation', true)
							this.showMask = false;
						}
					} else {
						uni.setStorageSync('isLocation', false)
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: (res) => {
								// console.log(res)
								this.getCity(res.latitude, res.longitude);
							},
							fail: (res) => {
								this.$api.msg('获取地址失败，将导致部分功能不可用')
							},
						});
					}
				}

				// #endif

				//腾讯地图
				// #ifndef APP-PLUS

				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						// console.log(res)
						this.getCity(res.latitude, res.longitude);
					},
					fail: (res) => {
						this.$api.msg('获取地址失败，将导致部分功能不可用')
					}
				});
				// #endif
			},

			async getNewNum() {
				let url = '/getNewJobsNum'
				if (this.cate == 2) {
					url = '/getNewWorkersNum'
				}

				let res = await this.$myRequest({
					url: url,
					data: {
						token: uni.getStorageSync('token')
					},
					methods: 'post'
				})

				this.newNum = res.data.data;

			},

			async getCity(lat, lng) {
				let res = await this.$myRequest({
					url: '/getCityByTX',
					data: {
						lat: lat,
						lng: lng,
					},
				})
				if (res.data.status == 1) {
					this.city = res.data.data;
				}
			},

			//项目发布
			goProjectCommon() {
				uni.navigateTo({
					url: '/pages1/pages/projects-commen/projects/list/index'
				})
			},

			//找工程
			findProject(type, title) {
				//判断是否登录
				if (type == 3) {
					let result = this.$api.isLogin();
					if (result === false) {
						return false;
					}
				}

				uni.navigateTo({
					url: '/pages1/pages/projects/projects?title=' + title + '&type=' + type
				})
			},

			//找劳务
			findWorder(type, title) {
				//判断是否登录
				if (type == 3) {
					let result = this.$api.isLogin();
					if (result === false) {
						return false;
					}
				}

				uni.navigateTo({
					url: '/pages3/pages/workers/workers?title=' + title + '&type=' + type
				})
			},

			async search() {
				let url = '/pages1/pages/projects/projects?title=工程列表'
				if (this.cate == 2) {
					url = '/pages3/pages/workers/workers?title=工人列表'
				}

				uni.navigateTo({
					url: url + '&keyword=' + this.keyword
				})
			},

			//最新岗位
			newJobs() {
				uni.showToast({
					title: '最新岗位'
				});
			},

			//视频教学
			videoTeach() {
				uni.navigateTo({
					url: '/pages5/pages/videos/videos?title=教学视频列表'
				})
			},

			async getThirdCates(data) {
				let cid = data.cid.toString();
				if (cid.length != 8) {
					uni.navigateTo({
						url: '/pages3/pages/works/works?cid=' + cid + '&title=' + data.name
					})
				} else {
					if (this.cate == 2) {
						uni.navigateTo({
							url: '/pages3/pages/publish-job/publish-job?cid=' + cid +
								'&title=' + data.name
						})
					} else {
						uni.navigateTo({
							url: '/pages1/pages/project-item/project-item?cid=' + cid +
								'&title=' + data.name
						})
					}
				}
			},

			goCertificateCenter() {
				uni.navigateTo({
					url: '/pages7/pages/nimble/certificate_center'
				})
			},

			async getNewVersion() {
				const systemInfo = uni.getSystemInfoSync()
				console.log(systemInfo)
				if (systemInfo.platform == 'android') {
					let res = await this.$myRequest({
						url: '/getSoftVersion'
					})

					if (res.data.status == 1) {
						console.log(res.data.data);
						let version = systemInfo.appWgtVersion;
						let cversion = parseInt(version.split(".").join(""));
						console.log(cversion);
						let sversion = parseInt(res.data.data.split(".").join(""))
						console.log(sversion)

						if (cversion < sversion) {
							this.showLoading = true;
							let url = this.$downLoadUrl;
							uni.downloadFile({
								url, //文件链接
								success: (data) => {
									if (data.statusCode === 200) {
										this.$api.msg('正在下载中...', 'success')
										//文件保存到本地
										uni.saveFile({
											tempFilePath: data
												.tempFilePath, //临时路径
											success: (res) => {
												this.$api.msg('软件已下载',
													'success')
												this.showLoading = false
												setTimeout(() => {
													//打开文档查看
													uni.openDocument({
														filePath: res
															.savedFilePath,
														success: (
															res
														) => {
															// console.log('打开文档成功');
														}
													});
												}, 1500)
											}
										});
									}
								},
								fail: (err) => {
									this.$api.msg('失败请重新下载')
								},
							})
						}
					}
				}
			},

			async gologin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},

			async cancle() {
				this.isShowLogin = false;
			},

			//退出登录
			toLogout() {
				this.$refs.alertDialog.open()
			},

			async dialogConfirm() {
				this.logout();
				uni.setStorageSync('token', '')
				// uni.setStorageSync('cate', 0)
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 600)
			},

			toggle(cate) {
				switch (cate) {
					case 1:
						this.toggleContent = '确定要切换工人版吗？';
						break;
					case 2:
						this.toggleContent = '确定要切换企业版吗？';
						break;
				}

				this.$refs.alertDialogT.open();
			},

			async dialogConfirmT() {
				let ncate = 1;
				if (this.cate == 1) {
					ncate = 2;
				}

				if (!this.hasLogin) {
					this.cate = ncate;
					uni.setStorageSync('cate', ncate);
					return;
				}

				let token = uni.getStorageSync('token');

				let url = '/switch_account';
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: this.cate,
						token: token
					},
					methods: 'post'
				})

				this.login(res.data.data.data);

				this.cate = ncate;

				uni.setStorageSync('token', res.data.data.token);
				uni.setStorageSync('cate', ncate);

				setTimeout(function() {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}, 1000)
			},
			//考勤管理
			async timeCard() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				uni.navigateTo({
					url: '/pages6/pages/time-card/time-card'
				})
			},
			//我的财富
			async goWealth() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}
				if (uni.getStorageSync("userInfo")) {
					if (uni.getStorageSync("userInfo").wealth_status == 0) {
						uni.navigateTo({
							url: '/pages6/pages/wealth/apply'
						})
					} else if (uni.getStorageSync("userInfo").wealth_status == 1) {
						this.$api.msg('申请中，等待审核资料！', 'none');
					} else if (uni.getStorageSync("userInfo").wealth_status == 2) {
						uni.navigateTo({
							url: '/pages6/pages/wealth/wealth'
						})
					} else if (uni.getStorageSync("userInfo").wealth_status == 3) {
						uni.navigateTo({
							url: '/pages6/pages/wealth/wealth'
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages6/pages/wealth/apply'
					})
				}
			},
			goHouses() {
				uni.navigateTo({
					url: '/pages7/pages/index/index'
				})
			},

			goBorrowMoney() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}
				if (uni.getStorageSync('cate') == 1) {
					this.$api.msg('该服务暂不对个人用户开放！');
					return false;
				}
				uni.navigateTo({
					url: '/pages8/pages/index/index'
				})
			},

			// 添加保险记录
			async buyInsurance() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}

				let res = await this.$myRequest({
					url: '/add_insurance_order',
					data: {
						token: uni.getStorageSync('token')
					},
					methods: 'POST'
				})
				let data = res.data;
				// console.log(data)
				switch (data.status) {
					case 2:
						// this.jobData[index].is_insurance = true;
						this.$api.msg(data.msg)
						break;
					case 1:
						let link = res.data.linkUrl
						// #ifdef H5
						if (this.$wechat && this.$wechat.isWechat()) {
							window.location.href = link
						} else {
							uni.navigateTo({
								url: '/pages6/pages/insurance/insurance?url=' + link
							})
						}
						// #endif

						// #ifndef H5
						uni.navigateTo({
							url: '/pages6/pages/insurance/insurance?url=' + link
						})
						// #endif
						break;
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: 30rpx;
		min-height: 3050upx;
	}
</style>
<style lang="scss" scoped>
	/* 头部 */
	.header-nav {
		background-color: #f3431a;
		display: flex;
		align-items: center;

		// #ifdef APP-PLUS
		padding: 80upx 30upx 0;
		// #endif
		// #ifdef H5
		padding: 30upx 30upx 0;
		// #endif
		// #ifdef MP-WEIXIN
		padding: 80upx 30upx 0;
		// #endif
	}

	.introduce-mask {
		position: fixed;
		z-index: 200;
		width: 86%;
		height: 150upx;
		line-height: 65upx;
		top: 100upx;
		left: 7%;
		background-color: #fff;
		padding: 10upx;
		border-radius: 20upx;
	}

	.introduce-mask-title {
		font-size: 30upx;
	}

	.introduce-mask-content {
		font-size: 28upx;
		color: #484646;
	}

	.carousel-section1 {
		position: relative;
		height: 362rpx;
		// #ifdef MP-WEIXIN
		height: 400rpx;
		// #endif
		background: url('@/static/images/banner1.png');
		background-size: 100% auto;
		// background-size: cover;

		.navbar {
			position: absolute;
			// #ifdef APP-PLUS
			top: 50rpx !important;
			// #endif
			// #ifdef H5
			top: 30rpx !important;
			// #endif
			// #ifdef MP-WEIXIN
			top: 50rpx !important;
			// #endif

			height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// justify-content: space-between;
			width: 100%;
			padding: 0 30rpx;

			.search {
				height: 66rpx;
				line-height: 66rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 65%;
				// #ifdef MP-WEIXIN
				width: 60%;
				//#endif
				border-radius: 10rpx;
				// margin-left: 12%;
				background-color: #fff;
				border: 1rpx solid #f3f3f6;

				.searchinput {
					height: 58rpx;
					font-size: 26rpx;
					padding-left: 29upx;
					background-color: #fff;
					border-radius: 23.5upx;
					width: 72%;
				}

				.search-img {
					float: right;
					width: 110rpx;
					height: 58rpx;
					margin-right: 4rpx;
				}
			}

		}
	}

	.carousel-section2 {
		position: relative;
		height: 362rpx;
		background: url('@/static/images/banner2.png');
		background-size: cover;

		.navbar {
			position: absolute;
			// #ifdef APP-PLUS
			top: 50rpx !important;
			// #endif
			// #ifdef H5
			top: 30rpx !important;
			// #endif
			// #ifdef MP-WEIXIN
			top: 50rpx !important;
			// #endif
			height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0 30rpx;

			.search {
				height: 66rpx;
				line-height: 66rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 65%;
				// #ifdef MP-WEIXIN
				width: 60%;
				//#endif
				border-radius: 10rpx;
				// margin-left: 12%;
				background-color: #fff;
				border: 1rpx solid #f3f3f6;

				.searchinput {
					height: 58rpx;
					font-size: 26rpx;
					padding-left: 29upx;
					background-color: #fff;
					border-radius: 23.5upx;
					width: 72%;
				}

				.search-img {
					float: right;
					width: 110rpx;
					height: 58rpx;
					margin-right: 4rpx;
				}
			}

		}
	}

	.area_city {
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 30upx;
	}

	.area_city_img {
		width: 24upx;
		height: 27upx;
		margin-right: 15upx;
	}

	.area_city_content {
		max-width: 90upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 快捷方式 */
	.cate-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 42upx;
		background: #fff;
		// font-size: 30rpx;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: $font-sm + 2upx;
			color: #333;
			position: relative;
			width: 33.3%;

			.cate-item-img {
				margin-top: 20rpx;
				width: 86rpx;
				height: 86rpx;

				border-radius: 50%;
				// opacity: .7;
				// box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
				margin-bottom: 16upx;
			}

			.cate-item-text {
				// font-size: 29rpx;
				margin-bottom: 20upx;
			}

			.today-num {
				position: absolute;
				padding: 4rpx;
				background-color: $base-color;
				color: #fff;
				border-radius: 10rpx;
				font-size: 20rpx;
				right: 0;
				top: 48rpx;
				min-width: 38rpx;
				text-align: center;
			}
		}
	}

	/* 热门工种 */
	.f-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		// padding: 6upx 30upx 8upx;
		background: #fff;
		margin-top: 12upx;
		border-bottom: 1px solid #f2f2f7;

		image {
			flex-shrink: 0;
			width: 36rpx;
			height: 36rpx;
			margin-right: 20upx;
		}

		.tit-box {
			display: flex;
			flex-direction: column;
		}

		.tit {
			font-size: $font-lg;
			// font-weight: bold;
			color: #545556;
			line-height: 1.3;
		}

		.icon-you {
			font-size: $font-lg +2upx;
			color: $font-color-light;
		}
	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 7% 30rpx 7%;
		background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 25%;
			padding-top: 30upx;
			background: #fff;

			// &:nth-child(2n+1) {
			// 	margin-right: 4%;
			// }

			.image-wrapper {
				width: 100%;
				background: #fff;
				overflow: hidden;
				display: flex;
				justify-content: center;
				margin-bottom: 17upx;

				image {
					width: 94upx;
					height: 94upx;
					opacity: 1;
				}
			}

			.title {
				display: flex;
				justify-content: center;
				color: #333;
			}
		}

	}

	.secondList {
		padding: 40rpx 0;
		width: 100%;

		.secondList-item {
			width: 25%;
			height: 180rpx;
			float: left;

			.secondList-item-img-img {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.oprate {
		height: 104rpx;
		padding: 30rpx 100rpx;
		display: flex;
		justify-content: space-between;

		.cancle {
			width: 103rpx;
			height: 46rpx;
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 10rpx;
			background-color: #c4c3c3;
			border-radius: 10rpx;
			color: #fff;
			padding-left: 14rpx;
		}

		.fabu {
			width: 103rpx;
			height: 46rpx;
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 10rpx;
			background-color: #f3431a;
			border-radius: 10rpx;
			color: #fff;
			padding-left: 14rpx;
		}
	}

	.user-login {
		text-align: left;
		font-size: $font-base;
		padding-bottom: 24rpx;

		.user-login-user {
			display: inline-block;
			vertical-align: center;
			height: 80rpx;
			line-height: 80rpx;

			.user-login-user-img {
				width: 32rpx;
				height: 30rpx;
			}

			.user-login-user-text {
				margin-left: 8rpx;
			}

			.user-login-user-content {
				border: 1px solid #eee;
				padding: 4px 4px;
				font-size: 14px;
				height: 30px;
			}
		}
	}

	.downloading {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 100;

		.downloading-img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.gologin {
		height: 64rpx;
		// #ifdef MP-WEIXIN
		margin-right: 20upx;
		// #endif
		font-size: 30rpx;
		display: flex;
		align-items: center;
		color: #fff;
	}
</style>